<template>
  <div class="header-container">
    <div class="prefix" @click="prefixOnClick">
      <i v-if="$store.state.app.showSidebar" class="el-icon-s-fold"></i>
      <i v-else class="el-icon-s-unfold"></i>
    </div>

    <div class="title">
      <slot name="title">
        <h1 @click="titleOnClick">{{$config.name}}</h1>
      </slot>

      <!-- <breadcrumb id="breadcrumb-container"
      class="breadcrumb-container" />-->
    </div>

    <div class="right">
      <slot name="right">
        <div class="icon" @click="clickFreshen" title="刷新">
          <i class="el-icon-refresh" style="font-weight: bolder;" />
        </div>
        <div class="icon" @click="clickScreenFull" title="全屏">
          <icon-svg icon-class="full_screen" />
        </div>

        <el-dropdown class="avatar">
          <el-avatar
            shape="square"
            size="large"
            placement="bottom"
            src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
          ></el-avatar>
          <el-dropdown-menu slot="dropdown" class="drop-menu">
            <el-dropdown-item>
              <i class="el-icon-user-solid"></i>
              {{this.$user.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </slot>
    </div>
  </div>
</template>

<script>
import breadcrumb from "../breadcrumb";
import screenfull from "screenfull";

export default {
  data() {
    return {
      //默认不全屏
      isFullscreen: false
    };
  },
  components: { breadcrumb },
  methods: {
    clickFreshen() {
      window.location.reload();
    },
    clickScreenFull() {
      // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
      if (!screenfull.isEnabled) {
        this.$message({
          message: "浏览器不能全屏",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    },
    backOnClick() {
      this.$router.go(-1);
    },
    inventoryManage() {
      this.$router.push("/inventory-manage");
    },
    exportExcel() {
      this.$emit("exportExcelOnClick");
    },
    editPassword() {
      this.$router.push("/password");
    },
    logout() {
      this.$confirm("确定注销当前用户吗?", "提示", {
        confirmButtonText: "注销",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$message.success("已注销当前用户");
        this.$store.commit("clearUser");
        setTimeout(() => {
          this.$linkToHome();
        }, 1200);
      });
    },
    titleOnClick() {
      //   this.$linkToHome()
    },
    prefixOnClick() {
      this.$store.commit("toggleSidbar");
    }
  }
};
</script>

<style lang="scss" scoped>
.header-container {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #dfdfdd;

  .prefix {
    width: 30px;
    padding-right: 10px;
    cursor: pointer;
  }

  .prefix i {
    font-size: 26px;
    color: #333;
  }

  .title {
    flex: 1;

    .breadcrumb-container {
      float: left;
    }

    h1 {
      display: inline;
      font-size: 20px;
      /* cursor: pointer; */
      margin: 0;
    }
  }

  .right {
    width: 160px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    > * {
      margin-right: 20px;
    }

    .icon {
      font-size: 24px;
      cursor: pointer;
    }

    .avatar {
      cursor: pointer;

      .drop-menu {
        span {
          display: block;
        }
      }
    }
  }
}
</style>